<template>
	<view class="wrapper">
		<view @click="bindAdd" class="flex_row addTxt"><image class="animated flash infinite slower" src="../../static/image/addTxt.png"></image><text>发布</text></view>
		<head-title titleText="社区" statusColor="linear-gradient(to right,#AE33F6,#6673FF)"></head-title>
		<scroll-view upper-threshold="10" @scrolltoupper="scrolltoupper" @scrolltolower="comTolower" scroll-y :style="{height:windowH+'px'}">
			<view class="listCont">
				<view class="list" v-for="(item,index) in comList" :key="index">
					<view class="box">
						<view class="user flex_row">
							<image @click="bindUser(item.user.id)" class="headPic" :src="item.user.head_img" mode="aspectFill"></image>
							<view @click="bindCommunity(index,item.content.id)" class="text flex_col">
								<view class="name flex_row">
									<text>{{item.user.nickname}}</text>
									<image v-if="item.user.sex==1" src="../../static/image/man.png" mode="aspectFill"></image>
									<image v-else src="../../static/image/woman.png" mode="aspectFill"></image>
								</view>
								<view class="time">{{item.user.send_time}}</view>
							</view>
						</view>
						<view @click="bindCommunity(index,item.content.id)" class="words">{{item.content.c_content}}</view>
						<view class="flex_row img" :class="{one:item.img_arr.c_img.length==1,'two':item.img_arr.c_img.length==2}">
							<block v-for="(img,imgs) in item.img_arr.c_img" :key="imgs">
								<image @click.stop="lookBig(index,item.content.id,imgs,item.img_arr.c_img)" :src="img.c_img" mode="aspectFill"></image>
							</block>
						</view>
					</view>
					<view class="icon flex_row">
						<view @click="bindCommunity(index,item.content.id)" class="flex_row">
							<image src="../../static/image/kan.png" mode="aspectFill"></image>
							<text>{{item.last_ceng.see_num}}</text>
						</view>
						<view @click="bindCommunity(index,item.content.id)" class="flex_row">
							<image src="../../static/image/pl.png" mode="aspectFill"></image>
							<text>{{item.last_ceng.ping_num}}</text>
						</view>
						<view @tap.stop="bindFlower(index,item.content.id)" hover-class="iconHover" class="flex_row">
							<image v-if="item.last_ceng.flower_num!=0" src="../../static/image/huaon.png" mode="aspectFill"></image>
							<image v-else src="../../static/image/hua.png" mode="aspectFill"></image>
							<text>{{item.last_ceng.flower_num}}</text>
						</view>
					</view>
				</view>
				<load :loading="loading" :loadTxt="loadTxt"></load>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import common from "../common/network.js";
	import headTitle from "./headTitle.vue";
	import load from "./load.vue";
	export default {
		name:'community',
		props:{
			comList:Array,
			loading:{
				default:false,
				type:Boolean,
			},
			loadTxt:{
				default:'正在加载...',
				type:'string'
			}
		},
		components:{headTitle,load},
		data(){
			return{
				windowH:0,imgnum:2,
			}
		},
		onLoad:function(){
			var that = this;
			common.network.getHeight(function(h,w){
				that.windowH = h-w/750*142;
			})
		},
		methods:{
			bindAdd:function(){
				this.$emit('bindAdd')
				
			},
			lookBig:function(c_index,id,index,item){
				this.$emit('lookBig',c_index,id,index,item);
				
			},
			bindUser:function(id){
				this.$emit('bindcomUser',id)
				
			},
			bindCommunity:function(index,id){
				this.$emit('bindCommunity',index,id)
			},
			comTolower:function(){
				this.$emit('comTolower')
			},
			bindFlower:function(index,id){
				this.$emit('bindFlower',index,id)
			},
			scrolltoupper:function(){
				this.$emit('scrolltoupper')
			}
		}
	}
</script>

<style scoped>
	@import url("../static/animate.css");
	.addTxt{
		width: 120px;
		height: 88px;
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		z-index: 200;
		font-size: 28px;
		padding-left: 30px;
		color: #fff;
	}
	.addTxt image{
		width: 34px;
		height: 34px;
		margin-right: 10px;
	}
	.list{
		padding-top: 25px;
		border-bottom: 1px solid #f1f1f1;
	}
	.listCont{
		padding-bottom: 130px;
	}
	.list .box{
		padding: 0 30px;
	}
	.user .text{
		justify-content: space-around;
		align-items: flex-start;
		font-size: 32px;
		font-family: "黑体";
	}
	.headPic{
		width: 90px;
		height: 90px;
		border-radius: 50%;
		margin-right: 20px;
	}
	.name image{
		width: 28px;
		height: 28px;
		margin-left: 14px;
	}
	.time{
		font-size: 26px;
		margin-top: 10px;
		color: #8E8E8E;
	}
	.words{
		max-height: 88px;
		font-size: 30px;
		line-height: 44px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		color: #3F3F3F;
		margin: 20px 0;
	}
	.img{
		justify-content: space-between;
	}
	.img.one image{
		width: 100%;
		height: 400px;
	}
	.img.two{
		justify-content: flex-start;
	}
	.img.two image{
		margin-right: 20px;
	}
	.img image{
		width: 32%;
		height: 230px;
		border-radius: 6px;
	}
	.icon{
		justify-content: space-between;
	}
	.iconHover{
		background: #f5f5f5;
	}
	.icon view{
		width: 33.33333%;
		font-size: 26px;
		padding: 22px 0;
		justify-content: center;
		color: #8D8D8D;
	}
	.icon image{
		width: 34px;
		height: 34px;
		margin-right: 12px;
	}
</style>
